import 'package:flutter/material.dart';

// 应用入口函数
void main() {
  runApp(const MyApp());
}

// 根组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 线性布局演示',
      theme: ThemeData(
        primarySwatch: Colors.teal,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const LinearLayoutDemoScreen(),
    );
  }
}

// 演示屏幕
class LinearLayoutDemoScreen extends StatelessWidget {
  const LinearLayoutDemoScreen({super.key});

  // 辅助方法，用于构建简单的带边框的文本框，方便观察布局
  Widget _buildBox(
    String label, {
    Color color = Colors.orange,
    double width = 60,
    double height = 40,
    // bool isExpanded = false, // 在这个演示中暂时不需要 isExpanded
  }) {
    return Container(
      width: width,
      height: height,
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: color.withOpacity(0.7),
        border: Border.all(color: Colors.black54, width: 1),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Center(
        child: Text(
          label,
          style: const TextStyle(fontSize: 12, color: Colors.white),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('线性布局 (Row & Column) 示例')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _buildSectionTitle('1. Row 示例 (线性布局)'),
            const Text('Row - MainAxisAlignment.center (默认 MainAxisSize.max):'),
            Container(
              color: Colors.grey[300],
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  _buildBox('A'),
                  _buildBox('B', width: 80),
                  _buildBox('C'),
                ],
              ),
            ),
            _buildSpacer(),

            const Text(
              'Row - MainAxisSize.min, MainAxisAlignment.center (对齐无效):',
            ),
            Container(
              color: Colors.grey[300],
              child: Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  _buildBox('A'),
                  _buildBox('B'),
                  _buildBox('C'),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Row - MainAxisAlignment.spaceBetween:'),
            Container(
              color: Colors.grey[300],
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _buildBox('A'),
                  _buildBox('B'),
                  _buildBox('C'),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Row - MainAxisAlignment.end, TextDirection.rtl:'),
            Container(
              color: Colors.grey[300],
              child: Row(
                textDirection: TextDirection.rtl,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  _buildBox('A'),
                  _buildBox('B'),
                  _buildBox('C'),
                ],
              ),
            ),
            _buildSpacer(),

            const Text(
              'Row - CrossAxisAlignment.start, VerticalDirection.up (不同高度子项):',
            ),
            Container(
              color: Colors.grey[300],
              height: 100,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                verticalDirection: VerticalDirection.up,
                children: <Widget>[
                  _buildBox('A', height: 60),
                  _buildBox('B', height: 40, color: Colors.lightBlue),
                  _buildBox('C', height: 80, color: Colors.pink),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Row - CrossAxisAlignment.stretch (子项拉伸填满纵轴):'),
            Container(
              color: Colors.grey[300],
              height: 80,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  // 注意：当父 Row 的 crossAxisAlignment 为 stretch 时，
                  // 子 _buildBox 的固定 height 将被 Row 的高度所覆盖。
                  // Expanded 会使其子元素也填满高度。
                  _buildBox('A', height: 20), // 原始高度会被忽略
                  _buildBox('B', color: Colors.lightBlue), // 原始高度会被忽略
                  Expanded(
                    child: _buildBox('C (Expanded)', color: Colors.pink),
                  ),
                ],
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('2. Column 示例 (线性布局)'),
            const Text(
              'Column - MainAxisAlignment.spaceAround (默认 MainAxisSize.max):',
            ),
            Container(
              height: 300,
              color: Colors.grey[300],
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  _buildBox('Item 1'),
                  _buildBox('Item 2', height: 60),
                  _buildBox('Item 3'),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Column - CrossAxisAlignment.center (默认宽度由最宽子项决定):'),
            Container(
              color: Colors.grey[300],
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  _buildBox('Short', width: 80, color: Colors.purple),
                  _buildBox('Medium Width', width: 150, color: Colors.purple),
                  _buildBox('Tiny', width: 50, color: Colors.purple),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('Column - CrossAxisAlignment.stretch (需要Column有确定宽度):'),
            ConstrainedBox(
              constraints: const BoxConstraints(
                minWidth: double.infinity, // 使Column宽度为父组件最大宽度
              ),
              child: Container(
                color: Colors.grey[300],
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    // 注意：当父 Column 的 crossAxisAlignment 为 stretch 时，
                    // 子 _buildBox 的固定 width 将被 Column 的宽度所覆盖。
                    _buildBox('Stretch 1', width: 50), // 原始宽度会被忽略
                    _buildBox('Stretch 2', color: Colors.indigo), // 原始宽度会被忽略
                  ],
                ),
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('3. 特殊情况 - 嵌套 Column (线性布局)'),
            const Text('外层 Column (max), 内层 Column (默认max但实际收缩):'),
            Container(
              height: 250,
              width: double.infinity,
              color: Colors.green.withOpacity(0.3),
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  const Text('外层 Column'),
                  Container(
                    color: Colors.red.withOpacity(0.5),
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.max, // 此处max无效，内层Column高度由子项决定
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        const Text('内层 Column (max无效)'),
                        _buildBox('Inner A'),
                        _buildBox('Inner B'),
                      ],
                    ),
                  ),
                  _buildBox('Outer C', color: Colors.yellow, width: 100),
                ],
              ),
            ),
            _buildSpacer(),

            const Text('使用 Expanded 使内层 Column 填充外层 Column 剩余空间:'),
            Container(
              height: 250,
              width: double.infinity,
              color: Colors.blue.withOpacity(0.3),
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  const Text('外层 Column'),
                  Expanded(
                    // Expanded 使其子组件填充主轴上的可用空间
                    child: Container(
                      width: double.infinity, // 让Expanded的子Container也填满宽度
                      color: Colors.red.withOpacity(0.5),
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          const Text('内层 Expanded Column'),
                          _buildBox('Expanded A'),
                          _buildBox('Expanded B'),
                        ],
                      ),
                    ),
                  ),
                  _buildBox('Outer D', color: Colors.orange, width: 100),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 辅助方法，用于构建章节标题
  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 8.0),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
      ),
    );
  }

  // 辅助方法，用于构建垂直间距
  Widget _buildSpacer({double height = 20.0}) {
    return SizedBox(height: height);
  }

  // 辅助方法，用于构建分割线
  Widget _buildDivider() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20.0),
      child: Divider(height: 1, thickness: 1, color: Colors.grey[400]),
    );
  }
}
